<template>
  <div class="account-page">
    <van-nav-bar title="账户安全" left-arrow @click-left="onClickLeft" />
    <van-cell
      v-if="clientId == 1"
      title="微信绑定"
      :is-link="!umsMember.openId"
      :value="umsMember.openId ? '已绑定' : '未绑定'"
      @click="bindWx"
    />
    <van-cell
      is-link
      :title="bindPhone ? '更换手机号' : '绑定手机号'"
      :value="bindPhone ? '更换' : '未绑定'"
      @click="toUpdatePhone"
    />
    <van-cell
      is-link
      :title="userInfo.isPassword ? '修改登录密码' : '设置登录密码'"
      :value="userInfo.isPassword ? '修改' : '未设置'"
      @click="toUpdatePassWord"
    />
    <van-cell
      is-link
      :title="userInfo.payLogo ? '修改支付密码' : '设置支付密码'"
      :value="userInfo.payLogo ? '修改' : '未设置'"
      @click="toUpdatePayPassWord"
    />
    <van-cell is-link :title="'注销账户'" :value="'无法恢复，谨慎操作'" @click="showPopup" />
    <van-popup v-model="show" closeable position="bottom" class="tips-cancellation-box">
      <div class="content-box">
        <h5>请注意，一旦注销账户：</h5>
        <ul class="tips-cancellation">
          <li>您的账户将无法登录与使用</li>
          <li>身份，账户信息，会员权益将被清空且无法恢复</li>
          <li>您已活动的积分与其他一切优惠权益都将被清空且无法恢复</li>
          <li>您已完成的交易将无法处理售后</li>
          <li>您将无法便捷的查询账号历史交易记录</li>
          <li>您的账号与绑定微信将自动解除关联</li>
          <li>
            您绑定的手机
            <span class="sub_content">将永远无法再次注册成为我们平台的新账户</span>
          </li>
        </ul>
        <div class="btn-box">
          <div class="sub-btn" @click="toCancellation">确定注销</div>
          <div class="no-btn" @click="hidePopup">不注销了</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";

import {
  NavBar,
  Cell,
  CellGroup,
  ActionSheet,
  Popup,
  DatetimePicker,
  Toast
} from "vant";
Vue.use(Cell)
  .use(CellGroup)
  .use(ActionSheet)
  .use(Popup)
  .use(DatetimePicker)
  .use(NavBar);
export default {
  data() {
    return {
      show: false
    };
  },
  computed: {
    ...mapState("user", {
      bindPhone: state => state.bindPhone,
      userInfo: state => state.userInfo,
      umsMember: state => state.userInfo.umsMember || {}
    }),
    ...mapState("sys", {
      clientId: state => state.clientId
    })
  },
  mounted() {
    this.onPlusReady(() => {
      this.initWeChatService();
    });
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    jumpLink(path, query) {
      this.$router.push({ path, query });
    },
    toUpdatePhone() {
      if (this.bindPhone) {
        this.jumpLink("editCheck", { mode: "mobile" });
      } else {
        this.jumpLink("editMobile", { isNew: true });
      }
    },
    showPopup() {
      this.show = true;
    },
    hidePopup(){
      this.show = false;
    },
    toUpdatePassWord() {
      if (!this.bindPhone) {
        Toast("请先绑定手机号码");
        return;
      }
      this.jumpLink("editPassword");
    },
    toCancellation() {
      this.jumpLink("cancellation");
    },
    toUpdatePayPassWord() {
      if (!this.bindPhone) {
        Toast("请先绑定手机号码");
        return;
      }
      this.jumpLink("editPayPassword");
    },
    initWeChatService() {
      if (window.aweixin) return;
      // 微信授权登录对象
      // 获取登录授权认证服务列表，单独保存微信登录授权对象
      // 5+APP在plusready事件中调用，uni-app在vue页面的onLoad中调用
      plus.oauth.getServices(
        function(services) {
          // Object.keys(services).some(key => {
          //     if (services[key].id == 'weixin') {
          //         window.aweixin = services[key];
          //     }
          // });
          window.aweixin = services[0];

          // alert('weService+:'+JSON.stringify(window.aweixin));
        },
        function(e) {
          Toast(e.message);
        }
      );
    },
    bindWx() {
      if (this.umsMember.openId) return;
      window.aweixin.authorize(
        e => {
          console.log("e.code+111:" + e.code); //app端获取到的code
          this.$http
            .post("/wx/bindingWeChat", { code: e.code })
            .then(res => {
              window.aweixin.logout();
              this.getUserInfo();
              // console.log("e.code+:" + e.code); //app端获取到的code
              // console.log(JSON.stringify(res))
              // console.log('token+:'+res.info.token)
              Toast("绑定成功");
            })
            .catch(error => {
              Toast(error.message);
            });
        },
        e => {
          Toast(e.message);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.account-page {
  .van-cell {
    align-items: center;
  }
  .head-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #eee;
  }
  .sub_content {
    color: $red;
  }
  .tips-cancellation-box {
    height: 12rem;
    .content-box {
      position: relative;
      padding-top: 16px;
      height: 100%;
    }
    h5 {
      padding-left: 14px;
      margin-top: 0;
    }
    .tips-cancellation {
      padding: 0 32px;
      h5 {
        padding-left: 14px;
      }
      li {
        list-style-type: disc;
      }
    }
    .btn-box {
      display: flex;
      justify-content: space-between;
      padding: 0 32px;
      width: 100%;
      position: absolute;
      bottom: 16px;
      .sub-btn {
        width: 2.10667rem;
        height: 32px;
       // background-image: linear-gradient(270deg, #ff7d59 0%, #fe472d 100%);
        box-shadow: 0 0 0.10667rem 0 rgba(0, 0, 0, 0.1);
        border-radius: 0.53333rem;
        font-size: 0.32rem;
        text-align: center;
        color: $title-clr;
        letter-spacing: 0;
        line-height: 32px;
        width: 140px;
        border:solid thin $line-clr
      }
      .no-btn {
        width: 2.10667rem;
        height: 32px;
        background-image: linear-gradient(270deg, #ff7d59 0%, #fe472d 100%);
        box-shadow: 0 0 0.10667rem 0 rgba(0, 0, 0, 0.1);
        border-radius: 0.53333rem;
        font-size: 0.32rem;
        text-align: center;
        color: #f8f8f8;
        letter-spacing: 0;
        line-height: 32px;
        width: 140px;
      }
    }
  }
}
</style>